<template>
  <view class="goods-detail" v-if="goodsDetail.goods_name">
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="goods-swiper">
      <swiper-item v-for="(item,index) in goodsDetail.pics" :key="index">
       <image class="swiper-image" :src="item.pics_big" @click="previewImg(index)" ></image>
      </swiper-item>
    </swiper>
    <!-- 商品信息区域 -->
    <view class="goods-info">
      <!-- 商品价格 -->
      <view class="goods-price">
       ¥{{goodsDetail.goods_price}}
      </view>
      <!-- 商品名 -->
      <view class="goods-info-box">
        <view class="goods-name">
          {{goodsDetail.goods_name}}
        </view>
        <view class="goods-icon">
          <uni-icons type="star" size="18" color="gray"></uni-icons>
          <text>收藏</text>
        </view>
      </view>
      <!-- 商品运费 -->
      <view class="goods-postage">
        快递:免运费
      </view>
    </view>
    <!-- 商品信息详情 -->
    <rich-text :nodes="goodsDetail.goods_introduce"></rich-text>
    <!-- 商品导航组件 -->
    <uni-goods-nav class="goods-nav" :fill="true"  :options="options" :buttonGroup="buttonGroup" @click="leftBtnClick" @buttonClick="rightBtnClick"/>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 跳转传参携带的商品id
        goodsId:'',
        // 商品详情对象
        goodsDetail:{},
       options: [{
      			icon: 'headphones',
      			text: '客服'
      		}, {
      			icon: 'shop',
      			text: '店铺',
      			infoBackgroundColor:'#007aff',
      			infoColor:"red"
      		}, {
      			icon: 'cart',
      			text: '购物车',
      			info: 2
      		}],
      	    buttonGroup: [{
      	      text: '加入购物车',
      	      backgroundColor: '#ff0000',
      	      color: '#fff'
      	    },
      	    {
      	      text: '立即购买',
      	      backgroundColor: '#ffa200',
      	      color: '#fff'
      	    }
      	    ]
      };
    },
    onLoad(options) {
     this.goodsId = options.goods_id
     this.getGoodsDetail()
    },
    methods:{
      // 获取商品详情的方法
     async getGoodsDetail(){
      if(this.goodsId === '') return uni.$showMsg('查询参数为空')
      const {data:res}  = await uni.$http.get(`/api/public/v1/goods/detail?goods_id=${this.goodsId}`)
      console.log(res)
      if(res.meta.status !== 200) return uni.$showMsg()
      res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;"').replace(/webp/g,'jpg')
      this.goodsDetail = res.message
      },
      // 点击图片进入预览图片的操作
      previewImg(index){
        const imgArr = this.goodsDetail.pics.map(i=>i.pics_big)
      uni.previewImage({
          urls: imgArr, // 图片的URL列表
          current: index    // 当前显示图片的索引
      })
      },
      rightBtnClick(e){
        console.log(e)
        if(e.content.text === '加入购物车'){
          this.options[2].info +=1
        }
      },
      leftBtnClick(e){
       console.log(e)
       if(e.content.text === '购物车'){
         uni.switchTab({
           url:'/pages/cart/cart'
         })
       }
      }
      
    }
  }
</script>

<style lang="scss">
.goods-detail{
  padding-bottom: 20rpx;
  .goods-swiper{
    height: 750rpx;
    .swiper-image{
      width: 100%;
      height: 100%;
    }
  }
  .goods-info{
    padding: 10rpx 15rpx;
    background-color: #fff;
    .goods-price{
      color: #c00000;
      font-size: 40rpx;
      margin-bottom: 20rpx;
    }
    .goods-info-box{
      display: flex;
      margin-bottom: 20rpx;
      .goods-name{
        font-size: 30rpx;
        flex:1;
      }
      .goods-icon{
        width: 100rpx;
        height: 80rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-left: 2rpx solid #efefee;
        color: gray;
      }
    }
    .goods-postage{
      color: gray;
      font-size: 24rpx
    }
  }
  .goods-nav{
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}
</style>
